<template>
  <div class="calendar-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">日历</h1>
        <p class="page-subtitle">管理你的课程和日程安排</p>
      </div>
      
      <div class="header-right">
        <n-button 
          type="primary"
          @click="showAddEventModal = true"
        >
          <template #icon>
            <n-icon><Plus /></n-icon>
          </template>
          添加事件
        </n-button>
      </div>
    </div>
    
    <!-- 日历视图 -->
    <div class="calendar-container">
      <n-card class="calendar-card">
        <!-- 日历头部控制 -->
        <div class="calendar-header">
          <div class="calendar-nav">
            <n-button-group>
              <n-button @click="previousMonth">
                <template #icon>
                  <n-icon><ChevronLeft /></n-icon>
                </template>
              </n-button>
              
              <n-button @click="goToToday">今天</n-button>
              
              <n-button @click="nextMonth">
                <template #icon>
                  <n-icon><ChevronRight /></n-icon>
                </template>
              </n-button>
            </n-button-group>
          </div>
          
          <div class="calendar-title">
            <h2>{{ formatDate(currentDate, 'YYYY年MM月') }}</h2>
          </div>
          
          <div class="calendar-views">
            <n-button-group>
              <n-button 
                :type="viewMode === 'month' ? 'primary' : 'default'"
                @click="viewMode = 'month'"
              >
                月视图
              </n-button>
              
              <n-button 
                :type="viewMode === 'week' ? 'primary' : 'default'"
                @click="viewMode = 'week'"
              >
                周视图
              </n-button>
            </n-button-group>
          </div>
        </div>
        
        <!-- 月视图 -->
        <div v-if="viewMode === 'month'" class="month-view">
          <!-- 星期标题 -->
          <div class="weekdays">
            <div 
              v-for="day in weekdays" 
              :key="day"
              class="weekday-header"
            >
              {{ day }}
            </div>
          </div>
          
          <!-- 日期网格 -->
          <div class="days-grid">
            <div 
              v-for="day in monthDays" 
              :key="day.date"
              class="day-cell"
              :class="{
                'other-month': !day.isCurrentMonth,
                'today': day.isToday,
                'selected': day.date === selectedDate,
                'has-events': day.events.length > 0
              }"
              @click="selectDate(day.date)"
            >
              <div class="day-number">{{ day.day }}</div>
              
              <!-- 事件列表 -->
              <div class="day-events">
                <div 
                  v-for="event in day.events.slice(0, 3)" 
                  :key="event.id"
                  class="event-item"
                  :style="{ backgroundColor: event.color || '#3b82f6' }"
                  @click.stop="selectEvent(event)"
                >
                  <span class="event-title">{{ event.title }}</span>
                  <span v-if="event.time" class="event-time">{{ event.time }}</span>
                </div>
                
                <!-- 更多事件提示 -->
                <div 
                  v-if="day.events.length > 3"
                  class="more-events"
                  @click.stop="showDayEvents(day)"
                >
                  +{{ day.events.length - 3 }} 更多
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 周视图 -->
        <div v-if="viewMode === 'week'" class="week-view">
          <!-- 时间轴 -->
          <div class="time-axis">
            <div class="time-header"></div>
            <div 
              v-for="hour in hours" 
              :key="hour"
              class="time-slot"
            >
              {{ hour }}:00
            </div>
          </div>
          
          <!-- 日期列 -->
          <div class="week-days">
            <div 
              v-for="day in weekDays" 
              :key="day.date"
              class="week-day-column"
            >
              <!-- 日期头部 -->
              <div 
                class="week-day-header"
                :class="{ 'today': day.isToday }"
              >
                <div class="day-name">{{ day.dayName }}</div>
                <div class="day-number">{{ day.day }}</div>
              </div>
              
              <!-- 时间槽 -->
              <div class="time-slots">
                <div 
                  v-for="hour in hours" 
                  :key="hour"
                  class="hour-slot"
                  @click="addEventAtTime(day.date, hour)"
                >
                  <!-- 该时间段的事件 -->
                  <div 
                    v-for="event in getEventsAtHour(day.events, hour)" 
                    :key="event.id"
                    class="week-event"
                    :style="{ backgroundColor: event.color || '#3b82f6' }"
                    @click.stop="selectEvent(event)"
                  >
                    <div class="event-title">{{ event.title }}</div>
                    <div class="event-time">{{ event.time }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </n-card>
    </div>
    
    <!-- 侧边栏 -->
    <div class="sidebar">
      <!-- 今日事件 -->
      <n-card title="今日事件" class="sidebar-card">
        <div class="today-events">
          <div v-if="todayEvents.length === 0" class="empty-state">
            <n-icon size="32" color="#d1d5db">
              <CalendarEvent />
            </n-icon>
            <p>今日暂无事件</p>
          </div>
          
          <div v-else class="events-list">
            <div 
              v-for="event in todayEvents" 
              :key="event.id"
              class="event-card"
              @click="selectEvent(event)"
            >
              <div class="event-indicator" :style="{ backgroundColor: event.color || '#3b82f6' }"></div>
              <div class="event-content">
                <div class="event-title">{{ event.title }}</div>
                <div class="event-details">
                  <span v-if="event.time" class="event-time">
                    <n-icon size="12"><Clock /></n-icon>
                    {{ event.time }}
                  </span>
                  <span v-if="event.description" class="event-desc">
                    {{ truncateText(event.description, 50) }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </n-card>
      
      <!-- 即将到来的事件 -->
      <n-card title="即将到来" class="sidebar-card">
        <div class="upcoming-events">
          <div v-if="upcomingEvents.length === 0" class="empty-state">
            <n-icon size="32" color="#d1d5db">
              <Clock />
            </n-icon>
            <p>暂无即将到来的事件</p>
          </div>
          
          <div v-else class="events-list">
            <div 
              v-for="event in upcomingEvents" 
              :key="event.id"
              class="event-card"
              @click="selectEvent(event)"
            >
              <div class="event-indicator" :style="{ backgroundColor: event.color || '#3b82f6' }"></div>
              <div class="event-content">
                <div class="event-title">{{ event.title }}</div>
                <div class="event-details">
                  <span class="event-date">
                    <n-icon size="12"><Calendar /></n-icon>
                    {{ formatDate(event.date, 'MM月DD日') }}
                  </span>
                  <span v-if="event.time" class="event-time">
                    <n-icon size="12"><Clock /></n-icon>
                    {{ event.time }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </n-card>
    </div>
    
    <!-- 添加/编辑事件模态框 -->
    <n-modal 
      v-model:show="showAddEventModal" 
      preset="card" 
      :title="editingEvent ? '编辑事件' : '添加事件'" 
      style="width: 500px"
    >
      <n-form
        ref="eventFormRef"
        :model="eventForm"
        :rules="eventRules"
        label-placement="top"
      >
        <n-form-item path="title" label="事件标题">
          <n-input 
            v-model:value="eventForm.title" 
            placeholder="请输入事件标题"
          />
        </n-form-item>
        
        <n-form-item path="date" label="日期">
          <n-date-picker 
            v-model:value="eventForm.date" 
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
        </n-form-item>
        
        <n-form-item path="time" label="时间">
          <n-time-picker 
            v-model:value="eventForm.time" 
            placeholder="选择时间（可选）"
            style="width: 100%"
            clearable
          />
        </n-form-item>
        
        <n-form-item path="description" label="描述">
          <n-input 
            v-model:value="eventForm.description" 
            type="textarea"
            placeholder="请输入事件描述（可选）"
            :rows="3"
          />
        </n-form-item>
        
        <n-form-item path="color" label="颜色">
          <div class="color-picker">
            <div 
              v-for="color in eventColors" 
              :key="color"
              class="color-option"
              :class="{ 'selected': eventForm.color === color }"
              :style="{ backgroundColor: color }"
              @click="eventForm.color = color"
            ></div>
          </div>
        </n-form-item>
      </n-form>
      
      <template #footer>
        <div class="modal-footer">
          <n-button @click="closeEventModal">取消</n-button>
          
          <div class="modal-actions">
            <n-button 
              v-if="editingEvent"
              type="error"
              :loading="calendarStore.isLoading"
              @click="handleDeleteEvent"
            >
              删除
            </n-button>
            
            <n-button 
              type="primary" 
              :loading="calendarStore.isLoading"
              @click="handleSaveEvent"
            >
              {{ editingEvent ? '更新' : '创建' }}
            </n-button>
          </div>
        </div>
      </template>
    </n-modal>
    
    <!-- 日事件详情模态框 -->
    <n-modal 
      v-model:show="showDayEventsModal" 
      preset="card" 
      :title="`${formatDate(selectedDate, 'MM月DD日')} 的事件`" 
      style="width: 400px"
    >
      <div class="day-events-list">
        <div 
          v-for="event in selectedDayEvents" 
          :key="event.id"
          class="event-card"
          @click="selectEvent(event)"
        >
          <div class="event-indicator" :style="{ backgroundColor: event.color || '#3b82f6' }"></div>
          <div class="event-content">
            <div class="event-title">{{ event.title }}</div>
            <div class="event-details">
              <span v-if="event.time" class="event-time">
                <n-icon size="12"><Clock /></n-icon>
                {{ event.time }}
              </span>
              <span v-if="event.description" class="event-desc">
                {{ event.description }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import {
  NButton,
  NButtonGroup,
  NIcon,
  NCard,
  NModal,
  NForm,
  NFormItem,
  NInput,
  NDatePicker,
  NTimePicker,
  useMessage,
  type FormInst,
  type FormRules
} from 'naive-ui'
import {
  Plus,
  ChevronLeft,
  ChevronRight,
  Calendar,
  CalendarEvent,
  Clock
} from '@vicons/tabler'
import { useCalendarStore } from '@/stores/calendar'
import { 
  formatDate, 
  truncateText,
  isToday
} from '@/utils'
import type { CreateEventRequest, CalendarEvent as Event } from '@/types/calendar'
import type { UpdateEventRequest } from '@/types/calendar'

const message = useMessage()
const calendarStore = useCalendarStore()

// 表单引用
const eventFormRef = ref<FormInst | null>(null)

// 视图模式
const viewMode = ref<'month' | 'week'>('month')

// 当前日期
const currentDate = ref(new Date())
const selectedDate = ref(formatDate(new Date(), 'YYYY-MM-DD'))

// 模态框状态
const showAddEventModal = ref(false)
const showDayEventsModal = ref(false)

// 编辑状态
const editingEvent = ref<Event | null>(null)
const selectedDayEvents = ref<Event[]>([])

// 表单数据
const eventForm = ref({
  title: '',
  date: null as number | null,
  time: null as number | null,
  description: '',
  color: '#3b82f6'
})

// 事件颜色选项
const eventColors = [
  '#3b82f6', // 蓝色
  '#10b981', // 绿色
  '#f59e0b', // 黄色
  '#ef4444', // 红色
  '#8b5cf6', // 紫色
  '#06b6d4', // 青色
  '#f97316', // 橙色
  '#84cc16'  // 青绿色
]

// 星期标题
const weekdays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

// 小时数组
const hours = Array.from({ length: 24 }, (_, i) => i)

// 表单验证规则
const eventRules: FormRules = {
  title: [
    {
      required: true,
      message: '请输入事件标题',
      trigger: ['input', 'blur']
    }
  ],
  date: [
    {
      required: true,
      message: '请选择日期',
      trigger: ['change', 'blur']
    }
  ]
}

// 月视图日期数据
const monthDays = computed(() => {
  const year = currentDate.value.getFullYear()
  const month = currentDate.value.getMonth()
  
  // 获取当月第一天
  const firstDay = new Date(year, month, 1)
  
  // 获取第一周的周一
  const startDate = new Date(firstDay)
  const dayOfWeek = firstDay.getDay()
  const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1
  startDate.setDate(firstDay.getDate() - daysToMonday)
  
  // 生成42天的数据（6周）
  const days = []
  const current = new Date(startDate)
  
  for (let i = 0; i < 42; i++) {
    const dateStr = formatDate(current, 'YYYY-MM-DD')
    const dayEvents = calendarStore.events.filter((event: any) => event.date === dateStr)
    
    days.push({
      date: dateStr,
      day: current.getDate(),
      isCurrentMonth: current.getMonth() === month,
      isToday: isToday(current),
      events: dayEvents
    })
    
    current.setDate(current.getDate() + 1)
  }
  
  return days
})

// 周视图日期数据
const weekDays = computed(() => {
  const startOfWeek = new Date(currentDate.value)
  const dayOfWeek = startOfWeek.getDay()
  const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1
  startOfWeek.setDate(startOfWeek.getDate() - daysToMonday)
  
  const days = []
  const current = new Date(startOfWeek)
  
  for (let i = 0; i < 7; i++) {
    const dateStr = formatDate(current, 'YYYY-MM-DD')
    const dayEvents = calendarStore.events.filter((event: any) => event.date === dateStr)
    
    days.push({
      date: dateStr,
      day: current.getDate(),
      dayName: weekdays[i],
      isToday: isToday(current),
      events: dayEvents
    })
    
    current.setDate(current.getDate() + 1)
  }
  
  return days
})

// 今日事件
const todayEvents = computed(() => {
  const today = formatDate(new Date(), 'YYYY-MM-DD')
  return calendarStore.events
    .filter((event: any) => event.date === today)
    .sort((a: any, b: any) => {
      if (!a.time && !b.time) return 0
      if (!a.time) return 1
      if (!b.time) return -1
      return a.time.localeCompare(b.time)
    })
})

// 即将到来的事件
const upcomingEvents = computed(() => {
  const today = new Date()
  const nextWeek = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000)
  
  return calendarStore.events
    .filter((event: any) => {
      const eventDate = new Date(event.date)
      return eventDate > today && eventDate <= nextWeek
    })
    .sort((a: any, b: any) => {
      const dateCompare = new Date(a.date).getTime() - new Date(b.date).getTime()
      if (dateCompare !== 0) return dateCompare
      
      if (!a.time && !b.time) return 0
      if (!a.time) return 1
      if (!b.time) return -1
      return a.time.localeCompare(b.time)
    })
    .slice(0, 5)
})

// 导航方法
const previousMonth = () => {
  if (viewMode.value === 'month') {
    currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() - 1, 1)
  } else {
    currentDate.value = new Date(currentDate.value.getTime() - 7 * 24 * 60 * 60 * 1000)
  }
}

const nextMonth = () => {
  if (viewMode.value === 'month') {
    currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() + 1, 1)
  } else {
    currentDate.value = new Date(currentDate.value.getTime() + 7 * 24 * 60 * 60 * 1000)
  }
}

const goToToday = () => {
  currentDate.value = new Date()
  selectedDate.value = formatDate(new Date(), 'YYYY-MM-DD')
}

// 选择日期
const selectDate = (date: string) => {
  selectedDate.value = date
}

// 选择事件
const selectEvent = (event: Event) => {
  editingEvent.value = event
  eventForm.value = {
    title: event.title,
    date: new Date(event.date).getTime(),
    time: event.time ? parseTimeToTimestamp(event.time) : null,
    description: event.description || '',
    color: event.color || '#3b82f6'
  }
  showAddEventModal.value = true
  showDayEventsModal.value = false
}

// 显示某天的所有事件
const showDayEvents = (day: any) => {
  selectedDate.value = day.date
  selectedDayEvents.value = day.events
  showDayEventsModal.value = true
}

// 在指定时间添加事件
const addEventAtTime = (date: string, hour: number) => {
  selectedDate.value = date
  eventForm.value = {
    title: '',
    date: new Date(date).getTime(),
    time: new Date(2000, 0, 1, hour, 0).getTime(),
    description: '',
    color: '#3b82f6'
  }
  editingEvent.value = null
  showAddEventModal.value = true
}

// 获取指定小时的事件
const getEventsAtHour = (events: Event[], hour: number) => {
  return events.filter(event => {
    if (!event.time) return false
    const eventHour = parseInt(event.time.split(':')[0])
    return eventHour === hour
  })
}

// 时间转换
const parseTimeToTimestamp = (timeStr: string) => {
  const [hours, minutes] = timeStr.split(':').map(Number)
  return new Date(2000, 0, 1, hours, minutes).getTime()
}

const formatTimeFromTimestamp = (timestamp: number) => {
  const date = new Date(timestamp)
  return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
}

// 关闭事件模态框
const closeEventModal = () => {
  showAddEventModal.value = false
  editingEvent.value = null
  eventForm.value = {
    title: '',
    date: null,
    time: null,
    description: '',
    color: '#3b82f6'
  }
}

// 保存事件
const handleSaveEvent = async () => {
  if (!eventFormRef.value) return
  
  try {
    await eventFormRef.value.validate()
    
    const eventData = {
      title: eventForm.value.title,
      date: formatDate(new Date(eventForm.value.date!), 'YYYY-MM-DD'),
      time: eventForm.value.time ? formatTimeFromTimestamp(eventForm.value.time) : undefined,
      description: eventForm.value.description || undefined,
      color: eventForm.value.color
    }
    
    if (editingEvent.value) {
      // 更新事件
      const updateData: UpdateEventRequest = {
        ...eventData,
        date: new Date(eventForm.value.date!)
      }
      await calendarStore.updateEvent(Number(editingEvent.value.id), updateData)
      message.success('事件更新成功')
    } else {
      // 创建事件
      const createData: CreateEventRequest = {
        ...eventData,
        date: new Date(eventForm.value.date!)
      }
      await calendarStore.createEvent(createData)
      message.success('事件创建成功')
    }
    
    closeEventModal()
  } catch (error) {
    console.error('Save event failed:', error)
  }
}

// 删除事件
const handleDeleteEvent = async () => {
  if (!editingEvent.value) return
  
  try {
    await calendarStore.deleteEvent(Number(editingEvent.value.id))
    message.success('事件删除成功')
    closeEventModal()
  } catch (error) {
    console.error('Delete event failed:', error)
  }
}

// 监听选中日期变化
watch(selectedDate, (newDate) => {
  if (newDate) {
    eventForm.value.date = new Date(newDate).getTime()
  }
})

// 组件挂载
onMounted(async () => {
  try {
    await calendarStore.fetchEvents()
  } catch (error) {
    console.error('Failed to load calendar events:', error)
  }
})
</script>

<style scoped>
.calendar-page {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
  height: calc(100vh - 120px);
}

.page-header {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.page-subtitle {
  color: #6b7280;
  margin: 0;
}

.calendar-container {
  height: fit-content;
}

.calendar-card {
  border-radius: 12px;
  height: 100%;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.calendar-title h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
}

/* 月视图样式 */
.month-view {
  display: flex;
  flex-direction: column;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  margin-bottom: 1px;
}

.weekday-header {
  padding: 12px 8px;
  text-align: center;
  font-weight: 500;
  color: #6b7280;
  background-color: #f9fafb;
  border-radius: 4px;
}

.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background-color: #e5e7eb;
}

.day-cell {
  min-height: 120px;
  padding: 8px;
  background-color: white;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  flex-direction: column;
}

.day-cell:hover {
  background-color: #f9fafb;
}

.day-cell.other-month {
  background-color: #f9fafb;
  color: #9ca3af;
}

.day-cell.today {
  background-color: #eff6ff;
}

.day-cell.selected {
  background-color: #dbeafe;
  border: 2px solid #3b82f6;
}

.day-cell.has-events .day-number {
  font-weight: 600;
}

.day-number {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.day-events {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.event-item {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  color: white;
  cursor: pointer;
  transition: opacity 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.event-item:hover {
  opacity: 0.8;
}

.event-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-time {
  font-size: 10px;
  opacity: 0.9;
  margin-left: 4px;
}

.more-events {
  font-size: 10px;
  color: #6b7280;
  cursor: pointer;
  padding: 2px 4px;
  text-align: center;
}

.more-events:hover {
  color: #3b82f6;
}

/* 周视图样式 */
.week-view {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 1px;
  background-color: #e5e7eb;
}

.time-axis {
  display: flex;
  flex-direction: column;
  background-color: white;
}

.time-header {
  height: 60px;
  border-bottom: 1px solid #e5e7eb;
}

.time-slot {
  height: 60px;
  padding: 8px;
  font-size: 12px;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: flex-start;
}

.week-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.week-day-column {
  background-color: white;
  display: flex;
  flex-direction: column;
}

.week-day-header {
  height: 60px;
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.week-day-header.today {
  background-color: #eff6ff;
}

.day-name {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 2px;
}

.week-day-header .day-number {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.week-day-header.today .day-number {
  color: #3b82f6;
}

.time-slots {
  flex: 1;
}

.hour-slot {
  height: 60px;
  border-bottom: 1px solid #e5e7eb;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s;
}

.hour-slot:hover {
  background-color: #f9fafb;
}

.week-event {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  padding: 4px 6px;
  border-radius: 4px;
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: opacity 0.2s;
  z-index: 1;
}

.week-event:hover {
  opacity: 0.8;
}

.week-event .event-title {
  font-weight: 500;
  margin-bottom: 1px;
}

.week-event .event-time {
  font-size: 10px;
  opacity: 0.9;
}

/* 侧边栏样式 */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: fit-content;
}

.sidebar-card {
  border-radius: 12px;
}

.today-events,
.upcoming-events {
  max-height: 400px;
  overflow-y: auto;
}

.empty-state {
  text-align: center;
  padding: 32px 16px;
  color: #6b7280;
}

.empty-state p {
  margin: 8px 0 0 0;
  font-size: 14px;
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.event-card:hover {
  background-color: #f9fafb;
}

.event-indicator {
  width: 4px;
  height: 100%;
  min-height: 40px;
  border-radius: 2px;
  flex-shrink: 0;
}

.event-content {
  flex: 1;
  min-width: 0;
}

.event-card .event-title {
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.event-date,
.event-card .event-time,
.event-desc {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6b7280;
}

/* 模态框样式 */
.color-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.color-option {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s;
  border: 2px solid transparent;
}

.color-option:hover {
  transform: scale(1.1);
}

.color-option.selected {
  border-color: #1f2937;
  transform: scale(1.1);
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-actions {
  display: flex;
  gap: 12px;
}

.day-events-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .calendar-page {
    grid-template-columns: 1fr;
    height: auto;
  }
  
  .sidebar {
    order: -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .calendar-page {
    padding: 16px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .calendar-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .sidebar {
    grid-template-columns: 1fr;
  }
  
  .day-cell {
    min-height: 80px;
  }
  
  .week-view {
    grid-template-columns: 50px 1fr;
  }
  
  .time-slot {
    height: 40px;
    font-size: 10px;
  }
  
  .hour-slot {
    height: 40px;
  }
}
</style>